<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="课程详情" name="first">
          <el-form
            ref="formValidate"
            v-loading="fullscreenLoading"
            class="formValidate mt20"
            :rules="ruleValidate"
            :model="formValidate"
            label-width="150px"
            @submit.native.prevent
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="课程名称：" prop="name">
                  <el-input v-model="formValidate.name" maxlength="249" placeholder="请输入课程名称" :disabled="formValidate.isShow"/>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="课程分类：" prop="cateId">
                  <el-cascader v-model="formValidate.cateId" :options="merCateList" style="width: 100%" :props="props2" clearable
                               class="selWidth" :show-all-levels="false" :disabled="formValidate.isShow"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="课程标签：" prop="name">
                  <el-tag
                    :key="item.label"
                    v-for="item in formValidate.labels"
                    closable
                    :disable-transitions="false"
                    @close="removeLabel(item)">
                    {{item.label}}
                  </el-tag>
                  <el-button v-if="formValidate.labels.length<=3" :disabled="formValidate.isShow" class="button-new-tag" size="small" @click="showTagDialog">+ 添加标签</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="副标题：" prop="subName">
                  <el-input v-model="formValidate.subName" maxlength="249" placeholder="请输入副标题" :disabled="formValidate.isShow"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="课程封面：" prop="image">
                  <div class="upLoadPicBox" @click="modalPicTap('1')">
                    <div v-if="formValidate.image" class="pictrue"><img :src="formValidate.image"></div>
                    <div v-else class="upLoad">
                      <i class="el-icon-camera cameraIconfont" />
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="课程详情：" prop="description">
                  <ueditor-from v-model="formValidate.description" :disabled="formValidate.isShow" :content="formValidate.description" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-button
                  v-show="!formValidate.isShow"
                  type="primary"
                  class="submission"
                  size="small"
                  @click="handleSubmit('formValidate')"
                >确定</el-button>
              </el-col>
            </el-row>
          </el-form>
          <div></div>
        </el-tab-pane>
        <el-tab-pane label="课程码" name="second">
          <div class="clearfix">
            <div class="container mt-1">
              <el-form inline size="small">
                <el-form-item label="课程码状态：">
                  <el-select v-model="tableFrom.status" placeholder="请选择课程码状态">
                    <el-option key="0" label="未兑换" value="0"></el-option>
                    <el-option key="1" label="已兑换" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="类型：">
                  <el-select v-model="tableFrom.type" placeholder="请选择类型">
                    <el-option key="1" label="课程码" value="1"></el-option>
                    <el-option key="2" label="课程积分二维码" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="Code：">
                  <el-input v-model="tableFrom.name" placeholder="请输入Code" class="selWidth" size="small" clearable>
                    <el-button slot="append" icon="el-icon-search" @click="seachCodeList" size="small"
                               v-hasPermi="['admin:course:list']"
                    />
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
            <el-button size="small" type="primary" @click="addCourseCode" class="mr10" v-hasPermi="['admin:course:save']">添加Code
            </el-button>
          </div>
          <el-table
            v-loading="listLoading"
            :data="tableData.data"
            style="width: 100%"
            size="mini"
            :highlight-current-row="true"
            :header-cell-style=" {fontWeight:'bold'}"
          >
            <el-table-column
              prop="id"
              label="ID"
              min-width="50"
            />
            <el-table-column label="Code" prop="code" min-width="150" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="类型" min-width="80">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.type==1">课程码</el-tag>
                <el-tag v-else type="info">课程积分二维码</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="兑换次数" v-if="tableFrom.type==1" align="center" prop="exchangeCount">

            </el-table-column>
            <el-table-column
              label="添加时间"
              min-width="120"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime | dataFormat }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag v-if="!scope.row.status">未兑换</el-tag>
                <el-tag v-else type="info">已兑换</el-tag>

              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="150" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleCodeDelete(scope.row)"
                           v-hasPermi="['admin:product:delete']">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              :page-sizes="[20, 40, 60, 80]"
              :page-size="tableFrom.limit"
              :current-page="tableFrom.page"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.total"
              @size-change="handleSizeChange"
              @current-change="pageChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="章节" name="third">
          <div class="clearfix">
            <el-button size="small" type="primary" @click="showAddCourse" class="mr10" v-hasPermi="['admin:course:save']">新增章节
            </el-button>
          </div>
          <el-table
            v-loading="listLoading"
            :data="courseListForm.list"
            style="width: 100%"
            size="mini"
            :highlight-current-row="true"
            :header-cell-style=" {fontWeight:'bold'}"
          >
            <el-table-column
              prop="id"
              label="ID"
              min-width="50"
            />
            <el-table-column label="章节名称"
                             prop="name"
                             min-width="150"
                             :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column label="课程封面" min-width="80">
              <template slot-scope="scope">
                <div class="demo-image__preview">
                  <el-image
                    style="width: 36px; height: 36px"
                    :src="scope.row.image"
                    :preview-src-list="[scope.row.image]"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="副标题"
                             prop="subName"
                             :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column label="课程目标"
                             prop="target"
                             :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column label="课程材料"
                             prop="material"
                             :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="sort"
              label="排序"
              min-width="70"
              align="center"
            />

            <el-table-column
              label="添加时间"
              min-width="120"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime | dataFormat }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" min-width="150" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" class="mr10" @click="getCourseInfo(scope.row)"
                           v-hasPermi="['admin:product:update']"
                >编辑
                </el-button>
                <el-button type="text" size="small" @click="handleCourseDelete(scope.row)"
                           v-hasPermi="['admin:product:delete']">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              :page-sizes="[20, 40, 60, 80]"
              :page-size="courseListForm.limit"
              :current-page="courseListForm.page"
              layout="total, sizes, prev, pager, next, jumper"
              :total="courseListForm.total"
              @size-change="handleCourseSizeChange"
              @current-change="pageCourseChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog title="添加标签" center width="480px" append-to-body :visible.sync="tagDialog.visible">
      <el-form :model="tagDialog.form">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="标签名称" :label-width="120" style="display: flex">
              <el-input v-model="tagDialog.form.label" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="标签类型" :label-width="120">
              <el-select v-model="tagDialog.form.labelType" placeholder="请选择标签类型">
                <el-option label="年龄" value="age"></el-option>
                <el-option label="工具" value="tool"></el-option>
                <el-option label="章节数" value="list_count"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="tagDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="comfirmTag">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="Code生成" center width="480px" append-to-body :visible.sync="codeDialog.visible">
      <el-form :model="codeDialog.form">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="Code类型" :label-width="120">
              <el-select v-model="codeDialog.form.type" placeholder="请选择Code类型">
                <el-option label="课程码" value="1"></el-option>
                <el-option label="积分二维码" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="数量" :label-width="120" style="display: flex">
              <el-input v-model="codeDialog.form.count" type="number" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="codeDialog.form.type==1">
            <el-form-item label="兑换次数" :label-width="120" style="display: flex">
              <el-input v-model="codeDialog.form.exchangeCount" type="number" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="codeDialog.form.type==2">
            <el-form-item label="积分值" :label-width="120" style="display: flex">
              <el-input v-model="codeDialog.form.integral" type="number" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="codeDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="creatCode">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="courseAddDialog.visible" :title="courseAddDialog.form.id?'章节编辑':'新增章节'" :before-close="clearCourseDialog" center width="60%" append-to-body>
      <el-form ref="courseFormValidate" v-loading="courseAddDialog.loading" class="formValidate mt20" :rules="courseAddDialog.rule"
               :model="courseAddDialog.form" label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="章节名称：" prop="name">
              <el-input v-model="courseAddDialog.form.name" maxlength="249" placeholder="请输入课程名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="章节副标题：" prop="subName">
              <el-input v-model="courseAddDialog.form.subName" maxlength="249" placeholder="请输入副标题"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程目标：" prop="target">
              <el-input v-model="courseAddDialog.form.target" maxlength="249" placeholder="请输入课程目标"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程材料：" prop="material">
              <el-input v-model="courseAddDialog.form.material" maxlength="249" placeholder="请输入课程材料"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="视频路径：" prop="video">
              <el-input v-model="courseAddDialog.form.video" maxlength="249" placeholder="请输入视频OSS路径"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="视频长度(秒)：" prop="videoLength">
              <el-input v-model="courseAddDialog.form.videoLength" type="number" placeholder="请输入视频时长"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="章节封面图：" prop="image">
              <div class="upLoadPicBox" @click="modalPicTap2('1')" >
                <div v-if="courseAddDialog.form.image" class="pictrue"><img :src="courseAddDialog.form.image"></div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont"/>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序：" prop="sort">
              <el-input v-model="courseAddDialog.form.sort" type="number" placeholder="请输入排序"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="章节详情：" prop="description">
              <ueditor-from v-model="courseAddDialog.form.description" :content="courseAddDialog.form.description" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm('courseFormValidate') ">取 消</el-button>
            <el-button type="primary" @click="addCourseList">确 定</el-button>
          </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  addCourseListApi,
  courseInfoApi, deleteCourseListApi,
  generateCodeApi,
  generateQRCodeApi,
  getCourseCodeListApi, getCourseListInfoApi,
  getCourseListListApi, upAndDownCourseApi, updateCourseListApi
} from "@/api/course";
import {categoryApi} from "@/api/store";

export default {
  name: 'ProductList',
  data() {
    return {
      activeName:'first',
      courseId:null,
      fullscreenLoading:false,
      formValidate: {
        image:'',
        labels:[]
      },
      merCateList:[],
      props2: {
        children: 'child',
        label: 'name',
        value: 'id',
        emitPath: false,
        checkStrictly: true
      },
      ruleValidate: {},
      tableFrom: {
        page: 1,
        limit: 20,
        courseId:null,
        status: null,
        type: '1'
      },
      courseListForm:{
        page:1,
        limit:20,
        total:0,
        courseId:null,
        list:[],
        loading:false
      },
      tagDialog:{
        visible:false,
        form:{
          label:'',
          labelType:''
        },
        rule:{
          label: [
            { required: true, message: '请输入标签名称', trigger: 'blur' }
          ],
          labelType: [
            { required: true, message: '请选择标签类型', trigger: 'change'}
          ],
        }
      },
      listLoading:false,
      tableData: {
        data: [],
        total: 0
      },
      codeDialog:{
        visible:false,
        form:{
          count:1,
          integral:1,
          type:'1',
          courseId:null,
          exchangeCount:1
        }
      },
      courseAddDialog:{
        visible:false,
        loading:false,
        rules:{
          name: [
            { required: true, message: '请输入章节名称', trigger: 'blur' }
          ],
          subName: [
            { required: true, message: '请输入章节副标题', trigger: 'blur' }
          ],
          imageAttId: [
            { required: true, message: '请选择封面', trigger: 'change' }
          ],
          description: [
            { required: true, message: '请填写章节详情', trigger: 'blur' }
          ],
          video:[
            { required: true, message: '请输入视频oss地址', trigger: 'blur' }
          ],
          videoLength:[
            { required: true, message: '请输入视频长度(秒)', trigger: 'blur' }
          ]
        },
        form:{
          id:null,
          image:'',
          courseId:null,
          name:'',
          subName:'',
          description:'',
          imageAttId:'',
          material:'',
          target:'',
          sort:1,
          video:'',
          videoLength:null
        }
      }
    }
  },
  mounted() {
    console.log(this.$route)
    if ( this.$route.params.courseId ) {
      this.courseId=this.$route.params.courseId
      this.tableFrom.courseId=this.$route.params.courseId
      this.courseListForm.courseId=this.$route.params.courseId
      this.getInfo()
      this.getCategorySelect()
      this.getList()
      this.getCourseList()
    }
  },
  methods:{
    getInfo(){
      let obj = {
        id:this.courseId
      }
      courseInfoApi(obj).then(res=>{
        console.log('res')
        console.log(res)
        res.cateId=res.cateId-0
        this.formValidate=res
      })
    },
    // 课程分类；
    getCategorySelect() {
      categoryApi({ status: -1, type: 8 }).then(res => {
        this.merCateList = res
      }).catch(res => {
        this.$message.error(res.message)
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    removeLabel(item){
      let arr = this.formValidate.labels,marr=[]
      for(let i in arr){
        if(arr[i].label==item.label&&arr[i].labelType==item.labelType){

        }else{
          marr.push(arr[i])
        }
      }
      this.formValidate.labels=marr
    },
    showTagDialog(){
      // this.courseLabelList=[]
      this.tagDialog.form={
        label: '',
        labelType: ''
      }
      this.tagDialog.visible=true
    },
    comfirmTag(){
      if(!this.tagDialog.form.labelType||!this.tagDialog.form.label){
        return
      }
      this.formValidate.labels.push({courseId:null,id:null,label:this.tagDialog.form.label,labelType:this.tagDialog.form.labelType})
      this.tagDialog.visible=false
    },

    handleSubmit(){
      let obj = this.formValidate
      obj.courseLabelList = obj.labels
      delete obj.image
      delete obj.labels
       upAndDownCourseApi(obj).then(res=>{
        this.$message.success('修改成功')
        this.getInfo()
      })
    },

    // 点击商品图
    modalPicTap (tit, num, i) {
      const _this = this
      this.$modalUpload(function(img) {
        if(tit==='1'&& !num){
          _this.formValidate.image = img[0].sattDir
          _this.formValidate.imageAttId = img[0].attId
        }

      },tit, 'content')
    },

    pageChange(page) {
      this.tableFrom.page = page
      this.getList()
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList()
    },

    seachCodeList() {
      this.tableFrom.page = 1
      this.getList()
    },
    getList(){
      getCourseCodeListApi(this.tableFrom).then(res=>{
        this.tableData.data=res.list
        this.tableData.total=res.total
      })
    },
    handleCodeDelete(){

    },
    addCourseCode(){
      this.codeDialog.form.courseId=this.courseId
      this.codeDialog.visible=true
    },
    creatCode(){
      let obj = {
        courseId:this.codeDialog.form.courseId
      }
      if(this.codeDialog.form.type==1){
        //课程码
        obj.exchangeCount = this.codeDialog.form.exchangeCount
        obj.type=1
        generateCodeApi(obj).then(res=>{
          this.tableFrom.type=this.codeDialog.form.type
          this.tableFrom.page=1;
          this.getList()
          this.clearCodeDialog()
        })
      }else {
        //积分
        obj.count=this.codeDialog.form.count
        obj.integral=this.codeDialog.form.integral
        generateQRCodeApi(obj).then(res=>{

        })
      }
    },
    clearCodeDialog(){
      this.codeDialog.form={
        count:1,
        integral:1,
        type:1,
        courseId:this.courseId,
        exchangeCount:1
      }
      this.codeDialog.visible=false
    },


    /**
     * 章节部分
     * */
    pageCourseChange(page) {
      this.courseListForm.page = page
      this.getCourseList()
    },
    handleCourseSizeChange(val) {
      this.courseListForm.limit = val
      this.getCourseList()
    },
    getCourseList(){
      let obj = {
        courseId:this.courseListForm.courseId,
        limit:this.courseListForm.limit,
        page:this.courseListForm.page,
      }
      getCourseListListApi(obj).then(res=>{
        this.courseListForm.list=res.list
        this.courseListForm.total=res.total
      })
    },
    // 点击商品图
    modalPicTap2 (tit, num, i) {
      const _this = this
      this.$modalUpload(function(img) {
        if(tit==='1'&& !num){
          console.log(img)
          _this.courseAddDialog.form.imageAttId = img[0].attId
          _this.courseAddDialog.form.image = img[0].sattDir
        }

      },tit, 'content')
    },
    getCourseInfo(row){
      let obj = {
        id:row.id
      }
      getCourseListInfoApi(obj).then(res=>{
        this.courseAddDialog.form=res
        this.showAddCourse()
      })
    },
    showAddCourse(){
      this.courseAddDialog.visible=true
    },
    resetForm(formName) {
      this.clearCourseDialog()
      this.$refs[formName].resetFields()
    },
    clearCourseDialog(){
      this.courseAddDialog.form={
        id:null,
        courseId:null,
        image:'',
        name:'',
        subName:'',
        description:'',
        imageAttId:'',
        material:'',
        target: '',
        sort: 1,
        video:'',
        videoLength:null
      }
      this.courseAddDialog.visible=false
    },
    addCourseList(){

      let obj = {
        courseId:this.courseId,
        name:this.courseAddDialog.form.name,
        subName:this.courseAddDialog.form.subName,
        description:this.courseAddDialog.form.description,
        target:this.courseAddDialog.form.target,
        material:this.courseAddDialog.form.material,
        imageAttId:this.courseAddDialog.form.imageAttId,
        video:this.courseAddDialog.form.video,
        videoLength:this.courseAddDialog.form.videoLength,
        sort:this.courseAddDialog.form.sort
      }
      // return console.log(obj.description)
      if(!obj.description){
        return this.$message.error('请输入章节详情')
      }
      if(!this.courseAddDialog.form.id){
        addCourseListApi(obj).then(res=>{
          this.getCourseList()
          this.clearCourseDialog()
          this.$message.success('新增章节成功')
        }).catch(res=>{
          this.$message.error('新增章节失败')
        })
      }else{
        obj.id=this.courseAddDialog.form.id
        updateCourseListApi(obj).then(res=>{
          this.getCourseList()
          this.clearCourseDialog()
          this.$message.success('修改成功')
        }).catch(res=>{
          this.$message.error('修改失败')
        })
      }
    },
    handleCourseDelete(row){

      deleteCourseListApi({id:row.id}).then(res=>{
        this.$message.success('删除成功')
        if(this.courseListForm.list.length==1&&this.courseListForm.page>1){
          this.courseListForm.page--
        }
        this.getCourseList()
      })
    }

  }
}
</script>

<style scoped>

</style>
